<!-- home -->
<template>
  <div class="container">
    <van-cell-group inset>
        <van-field
        :readonly="!isEdit"
        v-model="query.nickname"
        clearable
        label="昵称"
        placeholder="请输入昵称"
      />
      <van-field
        :readonly="!isEdit"
        :required="isEdit"
        v-model="query.name"
        clearable
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        :readonly="!isEdit"
        v-model="query.tel"
        :required="isEdit"
        type="tel"
        clearable
        label="联系号码"
        placeholder="请输入联系号码"
      />
      <van-field
        :readonly="!isEdit"
        v-model="query.email"
        :required="isEdit"
        clearable
        label="邮箱"
        placeholder="请输入邮箱"
      />
      <van-field
        readonly
        clickable
        :required="isEdit"
        name="picker"
        v-model="query.cardtypeText"
        label="证件类型"
        placeholder="点击选择证件类型"
        @click="isEdit ? (showPicker = true) : null"
      />
      <van-field
        v-model="query.cardno"
        :required="isEdit"
        :readonly="!isEdit"
        clearable
        label="证件号码"
        placeholder="请输入证件号码"
      />
      <van-field
        clickable
        readonly
        name="calendar"
        :value="query.birthday"
        label="生日"
        placeholder="点击选择日期"
        @click="isEdit ? (showCalendar = true) : null"
      />
      <van-field :readonly="!isEdit" v-model="query.unit" clearable label="学校/公司" placeholder="请输入学校/公司" />
      <van-field
        :readonly="!isEdit"
        v-model="query.position"
        clearable
        label="专业/岗位"
        placeholder="请输入专业/岗位"
      />
      <van-field
        :readonly="!isEdit"
        v-model="query.memo"
        type="textarea"
        clearable
        rows="2"
        maxlength="250"
        show-word-limit
        autosize
        label="备注"
        placeholder="填写备注信息"
      />
    </van-cell-group>
    <!-- <van-calendar
      v-model="showCalendar"
      @confirm="onConfirmDate"
      :min-date="new Date(1950, 0, 1)"
      :max-date="new Date()"
    /> -->
    <van-popup v-model="showCalendar" position="bottom">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="new Date(1950, 0, 1)"
        :max-date="new Date()"
        @confirm="onConfirmDate"
        @cancel="showCalendar = false"
      />
    </van-popup>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :default-index="cardnoSelect"
        :columns="cardTypeList"
        @confirm="onConfirmCard"
        @cancel="showPicker = false"
      />
    </van-popup>
    <div class="burron-list">
      <van-button round type="info" block style="margin-top: 10px" @click="formVerify" v-show="isEdit">提交</van-button>
      <van-button round type="default" block style="margin-top: 10px" @click="goEdit">{{
        isEdit ? '取消' : '修改资料'
      }}</van-button>
    </div>
  </div>
</template>

<script>
// 请求接口
import { editUserInfo, getH5UserInfo } from '@/api/user.js'
import { Dialog, Toast } from 'vant'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isEdit: false,
      username: '',
      password: '',
      showCalendar: false,
      showPicker: false,
      query: {
        openid: '', //微信openid
        name: '', // 用户名
        nickname:'',// 昵称
        birthday: '', // 生日
        tel: '', // 手机号
        email: '',// 邮箱
        unit: '', // 单位/学校
        position: '', // 岗位/专业
        cardtype: 2, // 证件类型
        cardno: '', // 身份证号码
        memo: '', // 备注
        authStatus: 0 // 是否已认证
      },
      queryCopy: {}, // 用于编辑后的回退
      errorMsg: {
        name: '请输入姓名',
        tel: '请输入正确的手机号码',
        cardtype: '请选择证件类型',
        cardno: '请输入证件号码'
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'cardTypeList', 'cardTypeMap']),
    cardnoSelect() {
      return this.cardTypeList.findIndex(v => v.value == this.userInfo.cardtype)
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // form提交过滤
    formVerify() {
      let error = false,
        msg
      // re = /^1\d{10}$/
      for (var key in this.query) {
        // 数字0不好判断 转string
        if (!String(this.query[key]) && this.errorMsg[key]) {
          error = true
          msg = this.errorMsg[key]
        }
      }

      if (error) {
        this.$notify({
          message: msg,
          duration: 3000,
          background: '#FF5722'
        })
      } else {
        this.onSubmit()
      }
    },
    // 提交
    async onSubmit(values) {
      let toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '正在提交'
      })
      try {
        const { msg } = await editUserInfo(this.query)
        Dialog.alert({
          message: msg
        })
        this.isEdit = false
        // 更新资料修改后的初始数据
        this.initData()
        // 更新全局store数据 移到init
        // this.$store.dispatch('setUserInfo')
      } finally {
        toast.clear()
      }
    },
    // 编辑资料
    goEdit() {
      if (this.isEdit) {
        this.query = { ...this.query, ...this.queryCopy }
      }
      this.isEdit = !this.isEdit
    },
    onConfirmDate(value) {
      this.query.birthday = this.$moment(value).format('YYYY-MM-DD')
      this.showCalendar = false
    },
    onConfirmCard(value) {
      this.query.cardtype = value.value.toString()
      this.query.cardtypeText = value.text
      this.showPicker = false
    },
    // 请求数据案例
    initData() {
      this.$store.dispatch('setUserBaseInfo')
      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
      getH5UserInfo().then(res => {
        const data = res.data.ckfUserbase
        this.query = { ...this.query, ...data, cardtypeText: this.cardTypeMap[data.cardtype] || '' }
        this.queryCopy = { ...this.query, ...data, cardtypeText: this.cardTypeMap[data.cardtype] || '' }
        
      })
      // this.$store.dispatch('setUserBaseInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  margin: 10px 0;
}
.myForm {
  border-radius: 50px;
}
.burron-list {
  padding: 10px;
}
</style>
